<html>
<head>
<style type="text/css">
.co-Pole{
	width:170px;
	height: 30px;
}

.Pole {
    top: 2px;
    height: 5px;
    background-color: #ccc;
    border-radius: 5px;
    position: relative;
    top: 10px;
}
.Pole-over {
    top: 2px;
    height: 5px;
    background-color: #ffb008;
    border-radius: 5px;
    width: 0;
}
.Pole span {
    height: 20px;
    width: 20px;
    border: 1px solid #ccc;
    background-color: #FFF;
    top: -9px;
    border-radius: 20px;
    cursor: pointer;
}
</style>
</head>
<body>
	<div id="XfontSize" class="co-Pole"></div>
	<input type="text" id="XfontSize_v" style="width:30px;"/>
	<button id="btn_set">设置</button>
</body>
</html>
<script type="text/javascript" src="Pole.js"></script>
<script type="text/javascript">
var $ID = function(idStr){
	return document.getElementById(idStr);
}
XfontSize = new Pole({
	container: document.getElementById("XfontSize"),
	width:170,
	onchange : function(v){
		$ID("XfontSize_v").value = (parseInt(v));
	},
	value : 14,
	max : 50,
	min : 0
});

$ID("btn_set").onclick = function(){
	XfontSize.setValue($ID("XfontSize_v").value);
};
</script>